<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Fancytree - Example</title>

	<script src="../lib/jquery.js" type="text/javascript"></script>
	<script src="../lib/jquery-ui.custom.js" type="text/javascript"></script>

	<link href="../src/skin-xp/ui.fancytree.css" rel="stylesheet" type="text/css">
	<script src="../src/jquery.fancytree.js" type="text/javascript"></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="../lib/prettify.css" rel="stylesheet">
	<script src="../lib/prettify.js" type="text/javascript"></script>
	<link href="sample.css" rel="stylesheet" type="text/css">
	<script src="sample.js" type="text/javascript"></script>
	<!-- End_Exclude -->

	<script type="text/javascript">
	$(function(){
		var DT = $.ui.fancytree;
		$.ui.fancytree.debug("Using fancytree " + $.ui.fancytree.version);
		// attach to all instances
		$("#tree, #tree3").fancytree({
			checkbox: true,
			selectMode: 1,
			activate: function(e, data){
				var node = data.node;
				$.ui.fancytree.debug("activate: e=", e, ", data=", data);
				if(!$.isEmptyObject(node.data)){
					alert("custom node data: " + JSON.stringify(node.data));
				}
			},
			lazyload: function(e, data){
				data.result = {url: "unit/ajax-sub2.json"};
			}
		}).bind("fancytreeactivate", function(e, data){
			$.ui.fancytree.debug("fancytreeactivate: e=", e, ", data=", data);
			return false;
//          $(this).fancytree("debug", "fancytreeactivate");
		});
		var tree = $("div:ui-fancytree").data("fancytree").getTree();
		DT.debug("Test ':ui-fancytree' expression " + $("div:ui-fancytree").length);

		/* Load tree from Ajax JSON
		 */
		$("#tree2").fancytree({
			source: {
				url: "ajax-tree-plain.json"
			},
			lazyload: function(e, data){
				// we can't return values from an event handler, so we
				// pass the result as `data`attribute.
//              data.result = {url: "unit/ajax-sub2.json"};
				data.result = $.ajax({
					url: "ajax-sub2.json",
					dataType: "json"
				});
			}
		});
		// call methods on multiple instances
		$("div:ui-fancytree").fancytree("foo", "after init");
		//
		$("button").button();
		$("button#destroy").click(function(e){
			$(":ui-fancytree").fancytree("destroy");
		});
		$("button#init").click(function(e){
			$(".sampletree").fancytree();
		});
		$("button#reload").click(function(e){
			tree.reload([
				{title: "node1"},
				{title: "node2"}
				]).done(function(){
					alert("reloaded");
				});
		});
		$("button#expand").click(function(e){
			tree.getNodeByKey("id3").toggleExpand().done(function(){
				alert("expanded " + this);
			}).fail(function(errMsg){
				alert("failed to expand " + this + ": " + errMsg);
			});
		});
		$("button#setSource").click(function(e){
			$(".sampletree").fancytree("option", "source", [
				{title: "node1"}
			]);
		});
	});
	</script>
</head>

<body class="example">
	<h1>Example: Initialization methods</h1>

	<p class="description">
		This tree uses default options.<br>
		It is initalized from a hidden &lt;ul> element on this page.
	</p>
	<div>
		<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
	</div>

	<p>
		<button id="destroy">Destroy</button> <button id="init">Init</button>
		<button id="expand">Expand</button>
		<button id="reload">Reload</button>
		<button id="setSource">Set source option</button>
	</p>
	<p>Tree with UL markup</p>
	<div id="tree" class="sampletree">
		<ul id="treeData" styleXXX="display: none;">
			<li>simple node (no explicit id, so a default key is generated)
			<li id="id1" title="Look, a tool tip!">Define key and tooltip using 'id' and 'title' attributes
			<li id="id2"><span>item2 with <b>html</b> inside a span tag</span>
			<li class="nolink">this nodes adds class 'nolink', so no &lt;a> tag is generated
			<li><a href="http:/wwwwendt.de/">using single a-tag to pass href (this would be clickable even if JavaScript is off)</a>
			<li data-foo="bar">defining custom node.data.foo = 'bar' using a data-foo attribute
			<li data-json='{"foo": "bar"}'>defining node.data.foo = 'bar' using a data-json attribute
			<li class="my-extra-class">node with some extra classes (will be added to the generated markup)
			<li id="id3" class="folder">Folder with some children
				<ul>
					<li id="id3.1">Sub-item 3.1
						<ul>
							<li id="id3.1.1">Sub-item 3.1.1
							<li id="id3.1.2">Sub-item 3.1.2
						</ul>
					<li id="id3.2">Sub-item 3.2
						<ul>
							<li id="id3.2.1">Sub-item 3.2.1
							<li id="id3.2.2">Sub-item 3.2.2
						</ul>
				</ul>
			<li id="id4" class="expanded">Document with some children (expanded on init)
				<ul>
					<li id="id4.1"  class="active focus">Sub-item 4.1 (active and focus on init)
						<ul>
							<li id="id4.1.1">Sub-item 4.1.1
							<li id="id4.1.2">Sub-item 4.1.2
						</ul>
					<li id="id4.2">Sub-item 4.2
						<ul>
							<li id="id4.2.1">Sub-item 4.2.1
							<li id="id4.2.2">Sub-item 4.2.2
						</ul>
				</ul>
			<li class="lazy folder" data-source="foo">Lazy loading folder
			<li id="id6" class="lazy folder expanded">Lazy loading folder (expand on init)
		</ul>
	</div>

	<p>Tree with Ajax data</p>
	<div id="tree2" data-source="ajax" class="sampletree">
	</div>

	<p>Tree with embedded JSON data</p>
	<div id="tree3" class="sampletree" data-type="json">
	[
		{"title": "cäsar€"},
		{"title": "a<a href='#'>b</a>c"}
	]
	</div>

	<p>Tree with programmatic dataAjax data</p>
	<div id="tree4" class="sampletree">
	</div>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="http://fancytree.googlecode.com">jquery.fancytree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="index.html">Example Browser</a>
		<a href="#" id="codeExample">View source code</a>
	</p>
	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
	<!-- End_Exclude -->
</body>
</html>
